<template>
  <div class="replenishmentDetailList">
    <div class="hbb-pickingRecordBox">
      <!-- 搜索部分 -->
      <form action="/">
        <van-search v-model="search_key" show-action placeholder="请输入配件编码或库位进行查找" @input="on_Search_Change" @cancel="on_Search_Cancel" />
      </form>
      <!-- 列表部分 -->
      <div class="hbb-dataList">
        <div class="info">
          <div class="header">
            <div class="one is-sort" :class="sortName == 'BrandName' && sortType ? sortType : ''" @click="sortFn" data-list="BrandName">品牌
              <div class="caret-wrapper">
                <i class="sort-caret ascending" data-name="ascending" data-list="BrandName">
                </i>
                <i class="sort-caret descending" data-name="descending" data-list="BrandName">
                </i>
              </div>
            </div>
            <div class="two is-sort" :class="sortName == 'DisplayPartsNo' && sortType ? sortType : ''" @click="sortFn" data-list="DisplayPartsNo">配件编码
              <div class="caret-wrapper">
                <i class="sort-caret ascending" data-name="ascending" data-list="DisplayPartsNo">
                </i>
                <i class="sort-caret descending" data-name="descending" data-list="DisplayPartsNo">
                </i>
              </div>
            </div>
            <div class="three is-sort" :class="sortName == 'StoreHouse' && sortType ? sortType : ''" @click="sortFn" data-list="StoreHouse">库位
              <div class="caret-wrapper">
                <i class="sort-caret ascending" data-name="ascending" data-list="StoreHouse">
                </i>
                <i class="sort-caret descending" data-name="descending" data-list="StoreHouse">
                </i>
              </div>
            </div>
            <div class="four" data-list="PhysicalStock">库存
            </div>
          </div>
          <div class="info-list">
            <div class="grounp" v-for="(oneDetail, detail_index) in display_repDetailList" :key="detail_index">
              <div class="one" @click='on_partInfo_click(oneDetail)'>
                <b>
                  {{oneDetail.BrandName}}
                </b>
                <span style="color: #4084EA;">{{oneDetail.DisplayPartsNo}}</span>
              </div>
              <div class="three">{{oneDetail.StoreHouse}}</div>
              <div class="four">{{oneDetail.PhysicalStock}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情弹层 -->
    <partItemDetailDialog v-if="partItemDetailDialog_launched" :shopDetail_input="partItemDetailDialog_input" :shopDetail_mode="partItemDetailDialog_initMode" @close="on_partItemInfoDialog_close">
    </partItemDetailDialog>
  </div>
</template>

<script>
import partItemDetailDialog from "../components/partItemDetailDialog";
const isObject = function (obj) {
  return obj !== null && typeof obj === "object";
};

const getValueByPath = function (object, prop) {
  prop = prop || "";
  const paths = prop.split(".");
  let current = object;
  let result = null;
  for (let i = 0, j = paths.length; i < j; i++) {
    const path = paths[i];
    if (!current) break;

    if (i === j - 1) {
      result = current[path];
      break;
    }
    current = current[path];
  }
  return result;
};
export default {
  name: "",
  data() {
    return {
      query_customerTeamId: 0, //页面入参: 客户ID
      cloudShopId: 0, // 云店id
      display_repDetailList: [], //铺货单详情 展示用
      display_repDetailList_sort: [], //铺货单详情 排序用
      orig_repDetailList: [], //铺货单详情 搜索用
      partItemDetailDialog_launched: false, // 是否启动商品详情的弹层组件
      partItemDetailDialog_initMode: "", // 启动商品详情弹层的模式 partItemInfo：商品详情 partItemFitAuto：车型适配
      partItemDetailDialog_input: {}, // 启动商品详情弹层的 入参
      search_key: "", //搜索key
      sortType: "", // 排序类型  ascending是升序 descending是降序
      sortName: "", // 排序名字  记录给谁排序
    };
  },
  created() {
    this.query_customerTeamId = this.$route.query.teamid || 0;
    this.initPage();
  },
  methods: {
    on_Search_Change(val) {
      this.search_key = val;
      this.do_search();
    },
    on_Search_Cancel(e) {
      this.search_key = "";
      this.do_search();
    },
    initPage() {
      this.GetReplenishmentDeatilList();
    },
    // 切换排序类型
    switchSortType(sortType, sortKey) {
      console.log("this.sortType", this.sortType);
      let switchSortTypeAfter; // 定义一个切换后的排序类型
      if (this.sortType == "") {
        switchSortTypeAfter = "ascending";
      } else if (this.sortType == "ascending") {
        switchSortTypeAfter = "descending";
      } else if (this.sortType == "descending") {
        switchSortTypeAfter = "";
      }
      this.sortRule(switchSortTypeAfter, sortKey);
    },
    sortFn(e) {
      let sortKey = e.target.dataset.list;
      let sortType = e.target.dataset.name;

      console.log("sortKey", sortKey);
      console.log("sortType", sortType);

      // 如果没有点击两个排序小箭头, 那么执行切换排序规则
      if (!sortType) {
        this.sortName = sortKey;
        this.switchSortType(e, sortKey);
        return;
      }

      if (sortKey != this.sortName) {
        this.sortType = "";
        this.sortName = sortKey;
      }

      this.sort_distinguish(sortType, sortKey);
    },
    // 排序识别
    sort_distinguish(sortType, sortKey) {
      if (this.sortType == sortType) {
        this.noSort();
        return;
      }
      this.sortType = sortType;
      this.sortRule(sortType, sortKey);
    },
    // 取消排序
    noSort() {
      this.sortType = "";
      this.display_repDetailList = this.display_repDetailList_sort;
    },
    // 排序规则
    orderBy(array, sortKey, sortType, sortMethod, sortBy) {
      if (
        !sortKey &&
        !sortMethod &&
        (!sortBy || (Array.isArray(sortBy) && !sortBy.length))
      ) {
        return array;
      }
      if (typeof sortType === "string") {
        sortType = sortType === "descending" ? -1 : 1;
      } else {
        sortType = sortType && sortType < 0 ? -1 : 1;
      }
      const getKey = sortMethod
        ? null
        : function (value, index) {
          if (sortBy) {
            if (!Array.isArray(sortBy)) {
              sortBy = [sortBy];
            }
            return sortBy.map(function (by) {
              if (typeof by === "string") {
                return getValueByPath(value, by);
              } else {
                return by(value, index, array);
              }
            });
          }
          if (sortKey !== "$key") {
            if (isObject(value) && "$value" in value) value = value.$value;
          }
          return [isObject(value) ? getValueByPath(value, sortKey) : value];
        };
      const compare = function (a, b) {
        if (sortMethod) {
          return sortMethod(a.value, b.value);
        }
        for (let i = 0, len = a.key.length; i < len; i++) {
          if (a.key[i] < b.key[i]) {
            return -1;
          }
          if (a.key[i] > b.key[i]) {
            return 1;
          }
        }
        return 0;
      };
      return array
        .map(function (value, index) {
          return {
            value: value,
            index: index,
            key: getKey ? getKey(value, index) : null,
          };
        })
        .sort(function (a, b) {
          let order = compare(a, b);
          if (!order) {
            order = a.index - b.index;
          }
          return order * sortType;
        })
        .map((item) => item.value);
    },
    // 排序规则 sortType 1是正序 2是倒序
    sortRule(sortType, sortKey) {
      if (sortType == "ascending") {
        this.sortType = sortType;
        this.display_repDetailList = this.orderBy(
          this.display_repDetailList,
          sortKey,
          "ascending"
        );
      } else if (sortType == "descending") {
        this.sortType = sortType;
        this.display_repDetailList = this.orderBy(
          this.display_repDetailList,
          sortKey,
          "descending"
        );
      } else {
        this.noSort();
      }
    },
    // 取得领料明细
    async GetReplenishmentDeatilList() {
      const res = await this.$appServive({
        url: "/Replenishment/GetReplenishmentDeatilList",
        data: {
          customerTeamId: this.query_customerTeamId || 0,
          pageSize: 999999,
          pageIndex: 1,
        },
        isShowLoading: true,
      });
      this.display_repDetailList = res.list;
      this.display_repDetailList_sort = res.list;
      this.orig_repDetailList = res.list;
      this.cloudShopId = res.cloudShopId;
    },
    on_partInfo_click(oneItem) {
      this.partItemDetailDialog_launched = true;
      this.partItemDetailDialog_initMode = "partItemInfo";
      this.partItemDetailDialog_input.shopId = this.cloudShopId;
      this.partItemDetailDialog_input.partItemId = oneItem.PartItemId;
    },
    // 关闭弹层
    on_partItemInfoDialog_close() {
      this.partItemDetailDialog_launched = false;
    },
    do_search() {
      var my_search_key = this.search_key.toLowerCase();
      var list = this.orig_repDetailList.filter(
        (o) =>
          o.DisplayPartsNo.toLowerCase().includes(my_search_key) ||
          o.StoreHouse.toLowerCase().includes(my_search_key)
      );
      this.display_repDetailList = list;
      this.display_repDetailList_sort = list;
    },
  },
  components: {
    partItemDetailDialog,
  },
};
</script>

<style scoped>
.hbb-pickingRecordBox {
  overflow: hidden;
  height: 100vh;
}

.van-search.van-search--show-action {
  background: #efeff4;
  padding: 0.21rem 0.27rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.van-search__content {
  background-color: #fff;
  height: 0.75rem !important;
  display: flex;
  align-items: center;
  flex: 1;
}
.van-search__action {
  height: 0.75rem;
  color: #4084ea !important;
  display: flex;
  align-items: center;
  padding-right: 0;
}
/* .van-cell.van-cell--borderless.van-field {
  padding: 0;
} */
div,
span,
button {
  box-sizing: border-box;
}

div,
span,
button {
  box-sizing: border-box;
}

page {
  background: #edf1f6;
}

.hbb-pickingRecordBox {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hbb-dateSelect {
  display: flex;
  width: 100%;
  justify-content: center;
  background: #fff;
  padding-bottom: 0.27rem;
}

.hbb-dateSelect div {
  margin-left: 0.53rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.hbb-dataList,
.hbb-dataList {
  width: 100%;
  overflow: hidden;
}

.info-list {
  height: calc(100vh - 2.16rem);
  padding: 0 0.21rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.hbb-dataList .time {
  display: flex;
  width: 100%;
  padding: 0.27rem 0.13rem;
  justify-content: center;
  font-size: 0.32rem;
  color: #96a6bc;
}

.hbb-dataList .carInfo {
  display: flex;
  width: 100%;
  align-items: center;
  background: #f9f9f9;
  padding: 0.21rem;
}

.hbb-dataList .carInfo image {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.13rem;
  margin-right: 0.27rem;
  border: 1px solid #bcbcbc;
}

.hbb-dataList .carInfo div.one {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.37rem;
}

.hbb-dataList .carInfo span.one {
  line-height: 0.13rem;
  font-size: 0.37rem;
  color: #181818;
  width: 100%;
  display: inline-block;
}

.hbb-dataList .carInfo span.two {
  line-height: 0.37rem;
  font-size: 0.32rem;
  color: #bcbcbc;
  width: 100%;
  display: inline-block;
}

.hbb-dataList .info {
  display: flex;
  width: 100%;
  background: #fff;
  flex-direction: column;
  /* padding: 0 .21rem; */
}

.hbb-dataList .info div {
  /* width: 100%; */
  align-items: center;
}

.hbb-dataList .info div.grounp {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.4rem 0;
}

.hbb-dataList .info div.header {
  border-bottom: 1px solid #ebebeb;
  height: 1rem;
  font-size: 0.32rem;
  color: #bcbcbc;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 0.21rem;
  display: flex;
  align-items: center;
}
.hbb-dataList .info .header > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hbb-dataList .info .header div.one {
  font-size: 0.36rem;
  width: 20%;
}

.hbb-dataList .info .header div.two {
  width: 40%;
  font-size: 0.36rem;
}

.hbb-dataList .info .header div.three {
  width: 20%;
  justify-content: center;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .info .header div.four {
  width: 20%;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .info div.header div {
  color: #bcbcbc;
}

.hbb-dataList .info div {
  float: left;
  line-height: 0.48rem;
  color: #5b5b5b;
  word-break: break-all;
}

.hbb-dataList .info .info-list div.one {
  font-size: 0.36rem;
  width: 60%;
}

.hbb-dataList .info .info-list div.two {
  font-size: 0.36rem;
}

.hbb-dataList .info .info-list div.three {
  width: 20%;
  justify-content: center;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .info .info-list div.four {
  width: 20%;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .info div.red {
  color: #e74c3c;
}

.hbb-xilie {
  border-radius: 0.16rem 1px 0.16rem 0.04rem;
  background: #fab220;
  color: #fff;
  display: inline-block;
  padding: 1px 0.11rem;
  font-size: 0.32rem;
  margin-left: 0.11rem;
}

.hb-total {
  display: flex;
  width: 100%;
  padding: 0.27rem 0.27rem;
  justify-content: flex-end;
  border-top: 1px solid #ddd;
  font-size: 0.32rem;
  position: relative;
}

.hb-total span {
  color: #282828;
  font-weight: bold;
}

.hbb-time {
  display: flex;
  width: 100%;
  justify-content: space-between !important;
  padding: 0 0.27rem;
}

.hbb-time span {
  display: flex;
  align-items: center;
  line-height: 0.27rem;
}

.hb-total .k {
  position: absolute;
  left: 0;
  float: left;
  font-size: 0.32rem;
  color: #e74c3c !important;
}

.sdw-buttonFool {
  width: 100%;
  height: 1.28rem;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 55;
}

.sdw-buttonFool .sdw-buttonBox {
  width: auto;
  height: 0.8rem;
  position: relative;
  float: left;
  clear: none;
}

.sdw-buttonFool .sdw-buttonBox navigator {
  width: auto;
  height: 0.8rem;
  padding: 0 0.8rem;
  border: 1px solid #e74c3c;
  border-radius: 0.4rem;
  background: #fff;
  font-size: 0.4rem;
  line-height: 0.88rem;
  text-align: center;
  color: #e74c3c;
}

.wux-search-bar__cancel {
  color: #4084ea !important;
  font-size: 0.36rem;
}

.caret-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 0.91rem;
  width: 0.53rem;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;
}

.sort-caret {
  width: 0;
  height: 0;
  border: 0.13rem solid transparent;
  position: absolute;
  left: 0.13rem;
}

.sort-caret.ascending {
  border-bottom-color: #c0c4cc;
  top: 0.16rem;
}

.sort-caret.descending {
  border-top-color: #c0c4cc;
  bottom: 0.16rem;
}

.descending .sort-caret.descending {
  border-top-color: #409eff;
}

.ascending .sort-caret.ascending {
  border-bottom-color: #409eff;
}
</style>
